<template>
  <div class="m-my">
    <!-- 头部 -->
    <header class="m-my-hd">
      <!-- <img class="bg" :src="avatar ? avatar : require('./img/pg.jpg')"> -->
      <div class="avatar-ct">
        <div class="avatar">
          <!-- <img :src="avatar ? avatar : require('../../assets/icon_avatar.png')"> -->
        </div>
        <!-- 已登录 -->
        <div class="info-login" v-if="token">
          <p>{{userName | toAsterisk}}</p>
          <p>{{memberRole}}</p>
        </div>
        <!-- 未登录 -->
        <div class="info-nologin" v-else>
          <button @click="$router.push('/login')">登录</button>
          <button @click="$router.push('/register')">注册</button>
        </div>
      </div>
    </header>

    <!-- 订单分类 -->
    <yd-cell-group>
      <yd-cell-item arrow type="link" href="/order?type=1">
        <span slot="left">我的订单</span>
      </yd-cell-item>
    </yd-cell-group>

    <!-- 分类订单 -->
    <yd-grids-group :rows="4">
      <yd-grids-item link="/order?type=2">
        <img slot="icon" src="./img/btn_pay.png">
        <span slot="text">待付款</span>
      </yd-grids-item>
      <yd-grids-item link="/order?type=3">
        <img slot="icon" src="./img/btn_goods_person.png">
        <span slot="text">待发货</span>
      </yd-grids-item>
      <yd-grids-item link="/order?type=4">
        <img slot="icon" src="./img/btn_move.png">
        <span slot="text">待收货</span>
      </yd-grids-item>
      <yd-grids-item link="/order?type=5">
        <img slot="icon" src="./img/btn_appraise.png">
        <span slot="text">待评价</span>
      </yd-grids-item>
    </yd-grids-group>

    <!-- 我的列表 -->
    <yd-cell-group>
      <yd-cell-item arrow type="link" href="/collect">
        <img slot="icon">
        <span slot="left">我的收藏</span>
      </yd-cell-item>
      <yd-cell-item arrow type="link" href="/address">
        <img slot="icon">
        <span slot="left">收获地址</span>
      </yd-cell-item>
      <yd-cell-item arrow type="link" href="/set">
        <img slot="icon">
        <span slot="left">账户与安全</span>
      </yd-cell-item>
      <yd-cell-item arrow @click.native="onWaite">
        <img slot="icon">
        <span slot="left">客服服务</span>
      </yd-cell-item>
      <yd-cell-item arrow @click.native="onWaite">
        <img slot="icon">
        <span slot="left">关于美妆</span>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button-group>
      <yd-button size="large" type="primary" @click.native="onLoginOut">退出登录</yd-button>
    </yd-button-group>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  // import { session } from 'util/storage'

  export default {
    data() {
      return {
        memberRole: ''
      }
    },
    methods: {
      // 退出登陆
      onLoginOut() {
        this.$dialog.confirm({
          title: '',
          mes: '是否退出登录',
          opts: () => {
            this.$toast('退出成功', () => {
              this.$store.commit('clearUserInfo')
              this.$router.push('/login')
            })
          }
        })
      },

      onWaite() {
        this.$toast('功能开发中...')
      }
    },
    created() {
      // 判断当前会员类型
      switch (this.userRole) {
        case 'REGULAR':
          this.memberRole = '普通会员'
          return
        case 'BUYER':
          this.memberRole = '采购商'
          return
        case 'SELLER':
          this.memberRole = '供应商'
          return
      }
    },
    computed: {
      ...mapGetters(['userInfo', 'token', 'userName', 'avatar', 'userRole'])
    },
    filters: {
      toAsterisk(value) {
        return value.substr(0, 3) + '****' + value.substr(7)
      }
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_border.scss';
  .m-my {
    .yd-btn-block {
      margin: 0.18rem 0;
    }
    .yd-grids-5 {
      @include border();
      padding-bottom: .2rem;
    }
    .yd-grids-item {
      padding: 0;
    }
    .yd-grids-icon {
      height: .8rem;
    }
    .yd-grids-icon img {
      height: 50%;
    }
    .yd-cell-icon {
      margin-top: .1rem;
    }
  }
  .m-my-hd {
    position: relative;
    height: 4.6rem;
    overflow: hidden;
    .bg {
      width: 100%;
      filter: blur(3px);
    }
    .yd-icon-setting {
      position: absolute;
      right: 0;
      top: 0;
      padding: .3rem;
    }
    .avatar-ct {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 1rem;
      text-align: center;
    }
    .avatar {
      display: inline-block;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 1rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info-nologin {
      margin-top: .5rem;
      button {
        width: 1.24rem;
        height: .42rem;
        border: 1px solid rgba(255, 255, 255, .6);
        font-size: .2rem;
        color: #fff;
        &:first-of-type {
          margin-right: .12rem;
        }
      }
    }
    .info-login {
      margin-top: .2rem;
      p {
        font-size: .36rem;
        color: #fff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
        margin-bottom: .1rem;
      }
    }
  }
</style>